<template>
	<!-- 
		通过:class属性根据theme变量设置不同的主题样式 
		@tap事件监听器在容器被点击时触发toDetail函数来跳转页面
		@hover-class事件监听器在容器被鼠标悬浮时触发
	-->
	<view class="item-container" :class="theme" @tap="toDetail" hover-class="hover">
		<!-- 当tag为new时显示一个类名为"p-tag"的图像 -->
		<image class="p-tag" src="@/static/new.png" v-if="tag == 'new'"></image>
		<!-- 
			class为"thumb"的图像显示info.thumb的图片
			Uniapp 的 与传统 web开发中image相比多了一个 mode 属性，用来设置图片的裁剪、缩放模式
			aspectFill：按照原始比例缩放图片，使图片的短边能完全填充容器，可能会裁剪掉部分图片
		 -->
		<image mode="aspectFill" :src="info.thumb" class="thumb"></image>
		<view class="body">
			<!-- 标题 -->
			<view class="title">{{info.title}}</view>
			<!-- 底部区域 -->
			<view class="bottom">
				<!-- tag信息为info.tag或默认值"人气新品" -->
				<view class="tag">{{info.tag || '人气新品'}}</view>
				<!-- 价格信息通过PriceDisplay组件显示info的价格信息 -->
				<view class="price">
					<PriceDisplay :info="info"></PriceDisplay>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			tag: {
				type: String
			},
			theme: {
				type: String,
				default () {
					return 'default-theme'
				}
 			}
		},
		data() {
			return {}
		},
		methods: {
			toDetail () {
				uni.navigateTo({
					url: '/pages/productDetail/index?uuid=' + this.info.uuid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-container {
		width: 328rpx;
		// height: 460rpx;
		border-radius: 40rpx 40rpx 20rpx 20rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
		box-shadow: 0px 14px 30px 0px rgba(226, 222, 204, 0.4);
		position: relative;

		.thumb {
			width: 100%;
			height: 310rpx;
		}
		
		.p-tag {
			position: absolute;
			width: 90rpx;
			height: 90rpx;
			right: 0rpx;
			top: 0rpx;
		}

		.body {
			background: white;
			padding: 12rpx 21rpx 10rpx 21rpx;
			box-sizing: border-box;// 用于指定元素的CSS盒模型。它包括元素的边框和内边距在指定的宽度和高度内，使得元素的总大小不会超过指定的尺寸
			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: #000000;



				overflow: hidden;
				text-overflow: ellipsis;// ellipsis当对象内文本溢出时显示省略标记
				display: -webkit-box;// 将元素显示为Webkit盒模型
				-webkit-line-clamp: 1;// 限制文本只显示一行
				-webkit-box-orient: vertical;// 设置盒模型的子元素的排列方向为垂直方向
			}

			.tag {
				height: 36rpx;
				background: #F7F7F7;
				border-radius: 50rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
				line-height: 36rpx;
				display: inline-block;
				// padding: 2rpx 8rpx;
			}
			
			.price {
				text-align: right;
				font-size: 30rpx;
				font-weight: 800;
				color: #DE1124;
			}
		}
	}
	
	.theme-1 {
		height: 400rpx;
		.body {
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			top: -30rpx;
			
			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
</style>
